<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="lib/jquery-latest.js" type="text/javascript"></script>
		<script src="lib/jquery-ui-1.11.4.custom/jquery-ui.js" type="text/javascript"></script>
		<link href="lib/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet">
		<script src="lib/three.min.js" type="text/javascript"></script>
		<script src="lib/PanoramaControls.js" type="text/javascript"></script>
		<script src="lib/OrbitControls.js" type="text/javascript"></script>
		<script src="lib/stats.min.js" type="text/javascript"></script>
		<script src="lib/dat.gui.min.js" type="text/javascript"></script>
		<script src="lib/pano.js" type="text/javascript"></script>
		<script src="lib/persist.js" type="text/javascript"></script>
		<script src="lib/THREEx.WindowResize.js" type="text/javascript"></script>
		<style>

#contextmenu{
	border : 1px solid grey;
	background-color : white;
	position : fixed;
	left : 0px;
	top : 0px;
}

#title_desc{
	opacity : 0.5;
	position : absolute;
	top : 0px;
	left : -41%;
	margin : 0px;
	width : 40%;
	height : 75%;
}

#title_desc:hover{
	cursor : pointer;
}

#title_desc_content{
	width : 100%;
	height : 100%;
	overflow : auto;
	z-index : 0;
}

#title_desc_content div{
	padding : 10px;
}

#bookmark{
	position : absolute;
	top :0px;
	left:95%;
	z-index : -1;
}

#title_desc_bgd{
	border-radius : 0px 0px 30px 0px;
	position : absolute;
	left : 0px;
	top : 0px;
	width : 100%;
	height : 100%;
	background-color : grey;
	opacity : 0.75;
	z-index : -2;
}

#folder{
	width : 100%;
	height : 120px;
	position : fixed;
	left : 0px;
	bottom : 0px;
	opacity : 0.6;
	pointer-event : none;
}

#folder:hover{
	opacity : 1;
}

#folder_open{
	width : 100px;
	overflow : hidden;
	position: relative;
	top : 50%;
	transform: translateY(-50%);
	z-index : 2;
}


#folder_panel{
	width : 100%;
	height : 100%;
	position : absolute;
	bottom : 0px;
	display : none;
}


#folder_bgd{
	width : 100%;
	height : 100%;
	background-color : grey;
	position : absolute;
	opacity : 0.3;
}


#folder_cnt{
	overflow-y: hidden;
	overflow-x: auto;
	position : absolute;
	transform: translateY(-50%);
	left : 180px;
	right : 0px;
	top : 50%;
	height : 100%;
}

ul{
	height : 100%;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li{
	margin : 1px;
	padding : 10px;
	float : left;
}

li:hover{
	background-color : white !important;
	cursor : pointer;
}

li:active{
	background-color : grey !important;
}

li p{
	text-align : center;
	margin : 1px;
	padding : 1px;
}


img.folder{
	position : relative;
	right : 100px;
	cursor:pointer;
}

img.folder:hover{
	position : relative;
	right : 200px;
}

#pin{
	height : 50px;
	overflow : hidden;
	position: relative;
	left : 120px;
}

#pin:hover{
	cursor : pointer;
}

#music{
	position : absolute;
	left : 120px;
	top : 55px;
	overflow : hidden;
	width : 25px;
}

#music:hover{
	left : 122px;
	top : 56px;
	cursor : pointer;
}

#music img{
	position : relative;
}

img.pin{
	position : relative;
	top : -90px;
}

img.pin:hover{
	top : -40px !important;
}

img.pin:active{
	top : 0px !important;
}

.folded {
	position:relative;
	left : 100px;
}

.unfolded {
	position : relative;
	left : 200px;
}

		</style>
	</head>
	<body>
			<div id="folder">
				<div id="folder_open">
					<img class="folder" src="pics/folders.png" alt="列表">
				</div>
				<div>
				<div id="folder_panel">
					<div id="folder_bgd"></div>
					<div id="pin">
						<img class="pin" src="pics/pin.png" alt="固定">
					</div>
					<div id="music">
						<img src="pics/music.png" alt="静音">
					</div>
					<div id="folder_cnt">
						<ul id="thumbnails">
						</ul>
					</div>
				</div>
				</div>
			</div>
		<div id="content3d" style="position:absolute;z-index:-2;top:0px;right:0px;">
		</div>
		<!--<div id="dialog" title="请选择添加的项目">
				<div id="radioset">
					<input type="button" id="waypointbtn" name="waypoint" value="Add Waypoint">
					<input type="button" id="videobtn" name="video" value="Add Video">
					<input type="button" id="albumbtn" name="album" value="Add Album">
				</div>
				</div>-->
		<div id="stats"></div>
		<audio id="audio"></audio>
		<div id="title_desc">
			<div id="title_desc_content">
				<div><h2 id="title">这是title</h2></div>
				<div><h4 id="description">这是内容</h4></div>
			</div>
			<img id="bookmark" src="pics/bookmark.png" alt="书签">
			<div id="title_desc_bgd"></div>
		</div>
		<script type="text/javascript">
$("#radioset").buttonset();
$("#dialog").dialog({
	autoOpen:false,
	width : 500,
	modal : true,
	buttons: [
	{
		text : "Cancel",
		click : function(){
			$(this).dialog("close");
		}
	}
]});

$(function(){

	var pinned = false;
	$("#folder_open").mouseenter(function(e){
		$("#folder_panel").slideDown();
	});

	$("#folder").mouseleave(function(e){
		if(pinned === false){
			$("#folder_panel").slideUp();
		}
	});

	$("img.pin").click(function(e){
		if(pinned === false){
			$("img.pin").css("top","0px");
			pinned = true;
		} else {
			$("img.pin").css("top","-90px");
			pinned = false;
		}
	});

	$("#music").click(function(e){
		if( document.getElementById("audio").muted === false){
			document.getElementById("audio").muted = true;
			$("#music img").css("left","-25px");
		} else {
			document.getElementById("audio").muted = false;
			$("#music img").css("left","0px");
		}
	});

	var title_pinned = false;
	$("#bookmark").mouseenter(function(e){
		$("#title_desc").animate({"left" : "0px", "opacity": "1"});
	});

	$("#title_desc").mouseleave(function(e){
		if(title_pinned === false){
			$("#title_desc").animate({"left" : "-41%", "opacity" : "0.5"});
		}
	});

	$("#title_desc").click(function(e){
		if(title_pinned === false){
			$("#bookmark").hide();
			title_pinned = true;
		} else {
			$("#bookmark").show();
			title_pinned = false;
		}
	});

});

function initThumbList(ss){
	var counter = 0;
	ss.forEach(function(s){
		li = jQuery("<li/>",{
			c_index : counter,
		}).appendTo($("#thumbnails"));
		counter ++;
		jQuery("<img/>",{
			src : s.thumbnail,
			alt : s.title
		}).appendTo(li);
		jQuery("<p/>",{
			text : s.title
		}).appendTo(li);
	});

	$("ul").css("width",(counter) * 142);
	$("li").click(function(e){
		e.preventDefault();
		var s = e.currentTarget.attributes.c_index.value;
		s = Number(s);
		var nth = Pano.current + 1;
		$("ul li:nth-child(" + nth  + ")").css("background-color","transparent");
		Pano.switchToScene(s);
		nth = s + 1;
		$("ul li:nth-child(" + nth  + ")").css("background-color","grey");
		return false;
	});
}

$(window).load(function(){
	
	ss = Persist.loadScenesFile("scenes/July14.json");
	initThumbList(ss);
	Pano.scenes = ss;
	$('#content3d').on("click",function(e){
		e.preventDefault();
		Pano.onDocumentClick(e.clientX,e.clientY);
		return false;
	});
	Pano.initPanoScene();
	Pano.switchToScene(0);
	Pano.animate();
	THREEx.WindowResize(Pano.renderer,Pano.camera);
});
		</script>
	</body>
</html>
